<template>
	<view class="home">
		<scroll-view scroll-x="true" class="nav-scroll">
			<view
				class="nav-scroll-item"
				v-for="(item, index) in navArray"
				:key="item.id"
				@click="clickNav(index)"
				:class="index == navIndex ? 'active' : ''"
			>
				{{ item.classname }}
			</view>
		</scroll-view>

		<view class="contnet">
			<view class="row" v-for="item in newsArray" :key="item.id">
				<news-box :item="item" @click.native="goDetail"></news-box>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return { navIndex: 0, navArray: [], newsArray: [] }
	},

	methods: {
		clickNav(index) {
			this.navIndex = index
		},
		// 跳转新闻详情函数
		goDetail() {
			uni.navigateTo({
				url: '/pages/detail/detail',
			})
		},
		// 获取导航列表数据
		getNavDate() {
			uni.request({
				url: 'https://ku.qingnian8.com/dataApi/news/navlist.php',
				success: res => {
					this.navArray = res.data
				},
			})
		},
		// 获取新闻列表数据
		getNewsData() {
			uni.request({
				url: 'https://ku.qingnian8.com/dataApi/news/newslist.php',
				data: {
					cid: 50,
				},
				success: res => {
					this.newsArray = res.data
				},
			})
		},
	},
	onLoad() {
		// 在onLoad里面去请求数据
		this.getNavDate()
		this.getNewsData()
	},
}
</script>

<style lang="scss" scoped>
.home {
	.nav-scroll {
		height: 100rpx;
		background-color: rgb(245, 247, 249);
		white-space: nowrap;
		position: fixed;
		top: var(--window-top);
		z-index: 10;
		left: 0;
		// 取消底部滚动条
		/deep/ ::-webkit-scrollbar {
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background-color: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}
		.nav-scroll-item {
			font-size: 40rpx;
			display: inline-block;
			padding-right: 40rpx;
			padding-left: 40rpx;
			line-height: 100rpx;
			&.active {
				color: #31c27c;
			}
		}
	}
	.contnet {
		padding: 30rpx;
		padding-top: 100rpx;
		.row {
			border-bottom: 1px dotted #9b9fef;
			margin-bottom: 20rpx;
		}
	}
}
</style>
